<template>
  <div class="search-history">
    <van-cell title="搜索历史" >
      
      <div v-if="isDeleteShow">
        <span @click="$emit('deleteAllHistory')">全部删除</span>
        &nbsp;&nbsp;
        <span @click="isDeleteShow=false">完成</span>
      </div>
      <van-icon v-else name="delete-o" @click="isDeleteShow=true"></van-icon>

    </van-cell>
    <van-cell 
    :title="item" 
    v-for="(item,index) in searchHistories"
    :key="index"
    @click="onSearchItemClick(item,index)"
    >
      <van-icon name="close" v-show="isDeleteShow"></van-icon>
    </van-cell>
    
  </div>
</template>

<script>
export default {
  name:'SearchHistory',
  props:{
    searchHistories:{
      type:Array,
      required:true
    }
  },
  data(){
    return {
      isDeleteShow:false

    }
  },
  methods:{
    onSearchItemClick(item,index){
      if(this.isDeleteShow){
        //删除状态   删除历史记录
        this.searchHistories.splice(index,1)

      }else{
        //非删除状态  直接进入搜索
        this.$emit('search',item)
      }
    }
  }

}
</script>

<style>

</style>